Course: Python Training
Topic: Working with Templates and Static Files
Course Link: Python Training Course
Demo Link: Register for a Course Demo
Website: JustAcademy Official Website
In Python web development, templates and static files are essential for building attractive, dynamic, and user-friendly websites. Templates define the structure and presentation of web pages, while static files provide resources such as CSS stylesheets, JavaScript files, images, icons, and fonts.
Python web frameworks such as Flask and Django support template rendering, allowing developers to generate HTML pages dynamically using application data. Static files improve the visual appearance and interactivity of these pages.
For example, an e-commerce website may use a template to display product names and prices dynamically, a CSS file to style product cards, a JavaScript file to handle cart interactions, and images to display products.
A template is a file that defines the layout and structure of a web page. It usually contains HTML along with placeholders and template instructions that allow a framework to insert dynamic data when the page is rendered.
Instead of creating a separate HTML file for every product, user, or article, developers can create one reusable template and supply different data to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML page.</p>
</body>
</html>This example contains fixed content. A template engine makes it possible to replace static text with information supplied by Python code.
<h1>Welcome, {{ name }}!</h1>
<p>You are learning Python web development.</p>In a Jinja2 template, {{ name }} is a variable expression. When the template is rendered, the framework replaces it with the supplied value.
Static files are resources served to the browser without being generated from application data for each request. They commonly include CSS, JavaScript, images, fonts, and icons.
| File Type | Common Extensions | Purpose |
|---|---|---|
| Stylesheets | .css | Control colors, layouts, spacing, typography, and responsive design. |
| JavaScript | .js | Add browser-side interactions and dynamic behavior. |
| Images | .png, .jpg, .jpeg, .svg, .webp | Display logos, product photographs, illustrations, and icons. |
| Fonts | .woff, .woff2, .ttf | Provide custom typography. |
| Icons | .svg, .ico | Display interface symbols and browser icons. |
| Feature | Templates | Static Files |
|---|---|---|
| Main purpose | Generate page structure and dynamic content. | Provide styling, scripts, images, and other resources. |
| Typical files | .html | .css, .js, .png, .svg, .woff2 |
| Processing | Usually processed by a template engine. | Usually served as files to the browser. |
| Dynamic data | Can display variables and iterate over collections. | Generally do not contain server-rendered template variables. |
| Examples | Product page, login page, dashboard. | Stylesheet, logo, image, browser-side script. |
A template engine combines a template with data to produce a final output, commonly HTML. It helps developers reuse layouts and display dynamic information without manually constructing complete HTML strings in Python.
Flask is a lightweight Python web framework. By convention, Flask looks for HTML templates in a folder named templates and serves application static resources from a folder named static.
Install Flask in your Python environment using pip.
python -m pip install flaskmy_flask_app/
│
├── app.py
├── templates/
│ ├── index.html
│ └── about.html
│
└── static/
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
└── logo.pngExplanation:
app.py contains Python application logic and route definitions.templates/ stores HTML template files.static/css/ stores CSS stylesheets.static/js/ stores JavaScript files.static/images/ stores image assets.Flask provides the render_template() function to locate a template, pass data to it, and return the rendered result as a response.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template(
"index.html",
name="Alex",
course="Python Web Development"
)
@app.route("/about")
def about():
return render_template("about.html")
if __name__ == "__main__":
app.run(debug=True)Explanation:
Flask(__name__) creates the Flask application.@app.route("/") maps the home URL to the home function.render_template() loads and renders the specified HTML template.name and course are passed to the template as context variables.Development note: Debug mode is intended for local development. Do not enable it in a production deployment.
Jinja2 allows developers to insert data into HTML using double curly braces. The variable must be supplied by the route or another context provider.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
</head>
<body>
<h1>Welcome, {{ name }}!</h1>
<p>Current course: {{ course }}</p>
</body>
</html>If the route passes name="Alex" and course="Python Web Development", the rendered page displays those values instead of the variable expressions.
{{ variable }}.{% ... %}.Conditional statements allow templates to display different content depending on the supplied data.
<h1>Student Dashboard</h1>
{% if is_logged_in %}
<p>Welcome back, {{ name }}!</p>
{% else %}
<p>Please log in to continue.</p>
{% endif %}In this example, the template checks the value of is_logged_in. If it is true, a welcome message appears; otherwise, a login message is displayed.
Security reminder: Hiding a button or section in a template is not an authorization mechanism. Sensitive operations must also be protected in the server-side route or business logic.
Loops allow developers to display collections such as products, students, articles, or employees without repeating the same HTML manually.
@app.route("/students")
def students():
student_list = ["Aarav", "Priya", "Rohan", "Neha"]
return render_template(
"students.html",
students=student_list
)<h1>Student List</h1>
<ul>
{% for student in students %}
<li>{{ student }}</li>
{% else %}
<li>No students found.</li>
{% endfor %}
</ul>The for statement iterates through each item in the collection. The optional else block is rendered when the collection has no items.
Template inheritance allows multiple pages to share a common layout. Instead of repeating the navigation bar, footer, metadata, and stylesheet references on every page, developers can create a base template and extend it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Website{% endblock %}</title>
<link rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<header>
<h1>My Python Website</h1>
<nav>
<a href="{{ url_for('home') }}">Home</a>
<a href="{{ url_for('about') }}">About</a>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>Copyright 2026 My Website</p>
</footer>
</body>
</html>{% extends "base.html" %}
{% block title %}About Us{% endblock %}
{% block content %}
<h2>About Us</h2>
<p>We build useful applications with Python.</p>
{% endblock %}The child template inherits the base layout and replaces the named blocks. This approach reduces duplication and keeps website pages consistent.
Template includes help reuse smaller sections of a page, such as navigation menus, alert messages, or product cards.
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav><body>
{% include "partials/navbar.html" %}
<main>
<h1>Welcome to the website</h1>
</main>
</body>When a navigation menu changes, developers can update the shared component instead of modifying every page individually.
CSS stylesheets control the visual presentation of HTML elements. In Flask, static resources should normally be referenced using the url_for('static', filename='...') helper.
Create static/css/style.css:
body {
font-family: Arial, sans-serif;
background-color: #f4f6f8;
color: #222;
margin: 0;
padding: 20px;
}
h1 {
color: #2457a7;
}
main {
max-width: 900px;
margin: 0 auto;
}
a {
color: #2457a7;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}">
</head>The helper generates the correct static URL for the configured Flask application. Using it is safer and more maintainable than hardcoding the path.
JavaScript adds interactive behavior to a web page. Examples include validating user input, responding to button clicks, and updating visible elements.
document.addEventListener("DOMContentLoaded", function () {
const button = document.getElementById("welcomeButton");
if (button) {
button.addEventListener("click", function () {
alert("Welcome to Python Web Development!");
});
}
});<button id="welcomeButton" type="button">
Click Me
</button>
<script src="{{ url_for('static', filename='js/script.js') }}" defer></script>The browser loads the JavaScript file and registers a click handler for the button. The defer attribute allows the browser to process the script after parsing the HTML document.
Images are often used for logos, banners, product photos, profile pictures, and other visual elements.
<img
src="{{ url_for('static', filename='images/logo.png') }}"
alt="Company logo"
width="180">The filename argument identifies the image relative to Flask's static folder. The alt attribute provides alternative text for accessibility and situations in which the image cannot be displayed.
Django has a built-in template system and a static file framework. Templates commonly live in a templates directory, while application-specific static resources can be stored in a static directory within a Django application.
django_project/
├── manage.py
├── config/
│ └── settings.py
└── shop/
├── views.py
├── templates/
│ └── shop/
│ └── home.html
└── static/
└── shop/
└── css/
└── style.cssThe application namespace shop/ inside the static directory helps prevent filename collisions between different applications.
STATIC_URL = "static/"In a typical Django project, django.contrib.staticfiles is included in INSTALLED_APPS. Django uses STATIC_URL as the URL prefix for static assets.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django Home</title>
<link rel="stylesheet" href="{% static 'shop/css/style.css' %}">
</head>
<body>
<h1>Welcome to Django</h1>
<img src="{% static 'shop/images/logo.png' %}"
alt="Shop logo">
</body>
</html>The {% load static %} statement enables Django's static template tags. The {% static %} tag generates a URL for a static resource.
Django views commonly use the render() shortcut to combine a template with a context dictionary and return an HTTP response.
from django.shortcuts import render
def home(request):
context = {
"name": "Alex",
"course": "Python Web Development",
"topics": [
"Templates",
"Static Files",
"Django Views"
]
}
return render(request, "shop/home.html", context){% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="{% static 'shop/css/style.css' %}">
</head>
<body>
<h1>Welcome, {{ name }}!</h1>
<p>Course: {{ course }}</p>
<h2>Topics</h2>
<ul>
{% for topic in topics %}
<li>{{ topic }}</li>
{% empty %}
<li>No topics available.</li>
{% endfor %}
</ul>
</body>
</html>Django's template syntax resembles Jinja2 in many areas, but the two systems are not identical. For example, Django uses {% empty %} in a for loop to handle an empty collection.
Template filters transform values for display. They help format text, dates, numbers, and other data without placing presentation logic directly into HTML.
<p>Name: {{ name | upper }}</p>
<p>Short description: {{ description | truncate(50) }}</p>
<p>Items: {{ items | length }}</p><p>Name: {{ name|upper }}</p>
<p>Items: {{ items|length }}</p>
<p>Joined: {{ joined_date|date:"d M Y" }}</p>Filters differ between template engines. Always check the documentation for the framework being used.
A clear folder structure makes a project easier to maintain as the number of pages and assets grows.
project/
├── app.py
├── templates/
│ ├── base.html
│ ├── index.html
│ ├── about.html
│ └── partials/
│ ├── navbar.html
│ └── footer.html
└── static/
├── css/
│ ├── style.css
│ └── responsive.css
├── js/
│ └── script.js
├── images/
│ ├── logo.png
│ └── banner.webp
└── fonts/Templates are frequently used to render HTML forms and display feedback from the server. Form processing should take place in the application logic, while templates present the form and its results.
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/greet", methods=["GET", "POST"])
def greet():
name = ""
if request.method == "POST":
name = request.form.get("name", "").strip()
return render_template("greet.html", name=name)
if __name__ == "__main__":
app.run(debug=True)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeting Form</title>
</head>
<body>
<h1>Enter Your Name</h1>
<form method="post">
<label for="name">Name:</label>
<input id="name" type="text" name="name" required>
<button type="submit">Submit</button>
</form>
{% if name %}
<p>Hello, {{ name }}!</p>
{% endif %}
</body>
</html>This example demonstrates basic form submission and conditional rendering. For production applications, add appropriate validation, CSRF protection where applicable, error handling, and business rules.
Template rendering and static resource management must be implemented carefully to prevent security vulnerabilities and avoid exposing sensitive information.
| Error or Symptom | Possible Cause | Solution |
|---|---|---|
| Template not found | The template is missing or stored in the wrong directory. | Verify the template folder, filename, and spelling. |
| CSS is not applied | The static URL is incorrect or the file cannot be found. | Use Flask's url_for('static', ...) or Django's {% static %} correctly. |
| Image does not appear | The filename, path, or extension is incorrect. | Check the asset's location and the generated browser URL. |
| Template variable is empty | The expected context value was not supplied or is empty. | Check the route or view context and the variable name. |
| JavaScript does not run | The script path is wrong or a browser error occurs. | Check the browser console and the Network tab. |
| Changes are not visible | The browser is using a cached asset. | Reload the page and inspect the requested asset in developer tools. |
| Static files missing in production | Static assets were not collected or deployed correctly. | Check deployment settings and the production static server configuration. |
| Unexpected template syntax | Syntax from one template engine is used in another. | Confirm whether the project uses Jinja2 or Django Template Language. |
During development, frameworks can provide convenient ways to serve static resources. Production environments often use a web server or content delivery network (CDN) to serve them more efficiently.
STATIC_URL correctly.STATIC_ROOT for the destination used to collect static files in production.python manage.py collectstatic as part of the deployment process when appropriate.Important: Django's development static file behavior is not a substitute for a properly configured production deployment. Production configuration depends on the hosting environment.
In this project, you will create a small Flask website that uses a reusable template, dynamic course data, CSS styling, JavaScript, and an image stored in the static folder.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
course = {
"title": "Python Web Development",
"description": "Learn to build dynamic web applications with Python.",
"topics": [
"Flask Fundamentals",
"HTML Templates",
"Static Files",
"Form Handling"
]
}
return render_template("index.html", course=course)
@app.route("/about")
def about():
return render_template("about.html")
if __name__ == "__main__":
app.run(debug=True){% extends "base.html" %}
{% block title %}Python Course{% endblock %}
{% block content %}
<h2>{{ course.title }}</h2>
<p>{{ course.description }}</p>
<h3>Course Topics</h3>
<ul>
{% for topic in course.topics %}
<li>{{ topic }}</li>
{% else %}
<li>Topics will be announced soon.</li>
{% endfor %}
</ul>
<button id="welcomeButton" type="button">
Explore Course
</button>
<script src="{{ url_for('static', filename='js/script.js') }}" defer></script>
{% endblock %}{% extends "base.html" %}
{% block title %}About the Course{% endblock %}
{% block content %}
<h2>About This Course</h2>
<p>This project demonstrates templates and static assets in Flask.</p>
{% endblock %}body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 24px;
background: #f4f6f8;
color: #222;
}
header, main, footer {
max-width: 900px;
margin: 0 auto;
}
header, footer {
padding: 12px 0;
}
main {
background: #fff;
padding: 24px;
border-radius: 8px;
}
button {
padding: 10px 16px;
cursor: pointer;
}document.addEventListener("DOMContentLoaded", function () {
const button = document.getElementById("welcomeButton");
if (button) {
button.addEventListener("click", function () {
alert("Explore the Python course!");
});
}
});python -m pip install flask
python app.pyOpen the local development address printed by Flask in your browser. Check that the course details appear, the topics are listed, the CSS styles load, and the button displays the alert.
Answer: A template is a file that defines the structure of a web page and can contain placeholders or template instructions. A template engine combines it with application data to generate the final HTML.
Answer: Static files are resources such as CSS, JavaScript, images, icons, and fonts that are served to the browser as files rather than generated from application data for each request.
Answer: Jinja2 is a template engine used with Flask and other Python applications. It supports variable expressions, loops, conditions, filters, template inheritance, and reusable components.
Answer: It loads a template from the configured template directory, renders it with the supplied context values, and returns the rendered content as a response.
Answer: Separating them improves maintainability, encourages reuse, keeps application logic organized, and makes it easier to update the page design independently of server-side functionality.
Answer: Store the file in the static directory and reference it using {{ url_for('static', filename='css/style.css') }} inside a Jinja2 template.
Answer: Django templates typically use {% load static %} followed by {% static 'app/path/to/file.css' %} to generate the static asset URL.
Answer: Template inheritance allows a child template to extend a base template and override named blocks, reducing duplicated layout code.
Answer: Variable expressions display values, such as {{ name }}. Template tags perform template operations, such as loops, conditions, includes, or inheritance.
Answer: Check the file's location, the generated URL, framework configuration, server responses, and browser developer tools. A 404 response commonly indicates that the requested file was not found at that URL.
Answer: A content delivery network distributes assets through geographically distributed servers, potentially improving loading speed and reducing the load on the application server.
Answer: Autoescaping helps prevent user-controlled text from being interpreted as executable HTML or JavaScript in an HTML context. It is an important protection against cross-site scripting, although it does not replace other security measures.
templates/ and static/.render_template() to render templates.url_for('static', filename='...') generates static URLs.render() in views to return rendered pages.{% load static %} and {% static %} for static resources.Working with templates and static files is a fundamental skill in Python web development. Templates make it possible to generate dynamic HTML, reuse common layouts, and display application data. Static files provide the styling, browser-side behavior, images, and other resources that make web pages engaging and functional.
By practicing with Flask and Django, developers can learn how to structure web applications, render dynamic data, organize reusable components, troubleshoot asset paths, and prepare applications for production deployment.
To continue learning, explore the Python Training Course at JustAcademy, visit the JustAcademy website, or register for a course demo.
